<template>
  <div class="skills">
    <div class="container">
      <h1 class="title">test</h1>
      <div class="test-content">
        <h2>CSS Test</h2>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>

<style>
  .test-content {
    position: relative;
    width: 500px;
    height: 300px;
    text-align: center;
    overflow: hidden;
    background-color: rgb(118, 218, 255);
  }
  .test-content::before,
  .test-content::after {
    position: absolute;
    content: '';
    background: #fff;
    height: 200%;
    width: 150%;
    animation-name: rotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  .test-content::before {
    bottom: 100px;
    border-radius: 45%;
    animation-duration: 10s;
  }
  .test-content::after {
    bottom: 90px;
    border-radius: 47%;
    animation-duration: 10s;
    opacity: .5;
  }
  @keyframes rotate {
    0% {
        transform: translate(-50%, 0) rotateZ(0deg);
    }
    50% {
        transform: translate(-50%, -2%) rotateZ(180deg);
    }
    100% {
        transform: translate(-50%, 0%) rotateZ(360deg);
    }
  }
</style>